import {Button, Modal, Spin, Input, message} from 'antd'
import classnames from "classnames";
import styles from "@/pages/pc/components/tinymce/index.less";
import duiSrc from "@/pages/pc/components/tinymce/dui.svg";
import closeSrc from "@/pages/pc/components/tinymce/x.svg";
import type {FC} from "react";
import {useCallback, useEffect, useState} from "react";

const Index: FC<{
  visible: boolean
  onCancel: () => void
  onOk: (videos: any[]) => void
  getContainer?: () => any
}> = ({visible, onCancel, onOk, getContainer}) => {

  const [fileList,setFileList] = useState<any[]>([])
  const [selected, setSelected] = useState<any[]>([]);
  const [url, setUrl] = useState<string>('')

  /**
   * A站
   * https://www.acfun.cn/v/ac42183905
   * https://www.acfun.cn/player/ac42183905
   *
   * b站
   * https://www.bilibili.com/video/BV1Kx411z7GT/?spm_id_from=333.337.search-card.all.click&vd_source=dd0b04bae50da623606f1a0ba11325fb
   * https://player.bilibili.com/player.html?bvid=BV1Kx411z7GT&page=1
   */
  const onClick = () => {
    let _url = ''
    let type = ''
    if(/^https?:\/\//.test(url)){
      if(url.indexOf('.acfun.cn') !== -1){
        const arr = url.split('/')
        const id = arr[arr.length - 1]
        type = 'a'
        _url = `//www.acfun.cn/player/${id}`
      }else if(url.indexOf('bilibili.com') !== -1){
        const arr = url.split('?')
        const arr1 = arr[0].split('/')
        const id = arr1[arr1.length -1] || arr1[arr1.length -2]
        type = 'b'
        _url = `//player.bilibili.com/player.html?bvid=${id}&page=1`

      }else{
        message.error('仅支持A站或B站视频')
        return
      }
      if(fileList.some(item => item.url === _url)){
        message.error('视频已存在')
        return
      }
      setFileList([
        ...fileList,
        {
          type,
          url: _url
        }
      ])
    }else{
      message.error('请输入正确的A站或B站链接地址')
    }
    console.log(url)
  }
  const ok = () => {
    if(!selected.length){
      message.error('请先选择插入的视频')
      return
    }
    onOk([...selected])
  }

  const remove = (url) => {
    setFileList([...fileList].filter(item => item.url !== url));
    setSelected([...selected].filter(item => item.url !== url));
  }

  const selectAll = useCallback(() => {
    setSelected([...fileList])
  }, [fileList])

  useEffect(() => {
    console.log('filelist', fileList);
  }, [fileList]);
  useEffect(() => {
    if(visible === false){
      setSelected([])
    }
  }, [visible])
  return (
    <Modal
      open={visible}
      wrapClassName={classnames('c-lecturer-chapter-modal-wrap-container', styles.container)}
      maskClosable={false}
      closable={false}
      onCancel={onCancel}
      getContainer={getContainer}
      footer={null}
      width={810}
      onOk={ok}
      zIndex={2080}
      okText={'插入所选项'}
    >
      <div style={{ lineHeight: '62px', textAlign: 'center', color: '#E5F5EF', fontSize: 16 }}>
        上传视频
      </div>
      <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 20px', background: '#2f5083'}}>
        <Input placeholder='请输入A站或B站视频地址' value={url} onChange={evt => setUrl(evt.target.value)}/>
        <Button style={{marginLeft: 16}} type='primary' onClick={onClick}>解析</Button>
      </div>
      <div className={styles.upload} style={{ padding: '10px 20px 0' }}>
        {fileList?.map((item) => {
          return (
              <span
                key={item.url}
                className={classnames(styles.img, {
                  [styles.selected]: selected.some((it) => it.url === item.url),
                })}
                onClick={() => {
                  if(selected.some((it) => it.url === item.url)){
                    setSelected([...selected].filter(it => it.url !== item.url))
                  }else{
                    setSelected([...selected, item])
                  }
                }}
              >
              {/*<img key={item.status} src={item.response?.data?.url || item.thumbUrl} alt="" />*/}
                <div key={item.url} style={{width: 120, height: 120, background: '#2f5083'}}>
                  <iframe style={{width: '100%', height: '100%'}} src={item.url} scrolling="no" border="0" frameBorder="no" framespacing="0" allowfullscreen="true"/>
                </div>
              <i onClick={() => remove(item.url)} className={styles.close} />
            </span>
          );
        })}
      </div>
      <div className={styles.footer}>
        <span>
          <span onClick={selectAll}><img src={duiSrc} alt=""/>选择全部</span>
          <span onClick={() => setSelected([])}><img src={closeSrc} alt=""/>取消全部</span>
        </span>
        <span>
          <Button onClick={onCancel}>取消</Button>
          <Button onClick={ok} type='primary'>插入所选项</Button>
        </span>
      </div>
    </Modal>
  );
}

export default Index
